<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        面试题:react/vue中的key有什么作用?(key的内部原理)
        1. 虚拟DOM中key的作用:
            * key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据`新数据`生成`新虚拟DOM`,随后Vue进行`新虚拟DOM`与`旧虚拟DOM`的差分比较,比较规则如下:
        2. 对比规则:
            1. `旧虚拟DOM`中找到了与`新虚拟DOM`相同的key:
                1. 若`虚拟DOM`中内容没变,直接使用之前的`真实DOM`.
                2. 若`虚拟DOM`中内容变了,则生成新的`真实DOM`,随后替换掉页面中之前的`真实DOM`.
        3. 用index作为key可能会引发的问题:
            1. 若对数据进行`逆序添加`/`逆序删除`等破坏顺序操作:会产生没有必要的`真实DOM`更新(界面效果没问题,但效率底).
            2. 如果结构中还包含输入类的DOM:会产生错误DOM更新(界面有问题).
        4. 开发中如何选择key?
            1. 最好使用每条数据的唯一标识作为key,比如id/手机号/身份证号/学号等唯一值.
            2. 如果不猜对数据的`逆序添加`/`逆序删除`等破坏顺序操作,仅用于渲染展示,使用index作为key是没有问题的.
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表(遍历数组)</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: "张三", age: 18 },
                { id: '002', name: "李四", age: 19 },
                { id: '003', name: "王五", age: 20 }
            ]
        },
        methods: {
            add(){
                const p = {id:'004',name:'老刘',age:21};
                // this.persons.push(p);  //push是添加到数组后面
                this.persons.unshift(p);  //unshift是添加到数组前面
            }
        },
    });
</script>

</html>